<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>crud</title>


</head>
<body>

<div id="app">


    <div class="row">
        面包屑导航
    </div>
    <div class="row">
        搜索区
    </div>
    <div class="row">

        <div class="toolbar button-group">

            <button @click="btnAddClick">添加</button>
            <button>打印</button>
            <button>导入</button>

        </div>
        <table>
            <thead>
            <tr>
                <th>课程名称</th>
                <th>搜索学院</th>
                <th>操作</th>
            </tr>
            </thead>


            <tbody>
            <tr v-for="item in list">
                <td>
                    {{item.courseName}}
                </td>
                <td>
                    {{item.college.name}}
                </td>
                <td>
                    <button>删除</button>
                </td>
            </tr>

            </tbody>

        </table>


    </div>


    <hr>

    <diiv v-show="info.isShow">
        <form>
            <div>
                课程名称:<input v-model="info.current.courseName"/>
            </div>
            <div>
                所属学院:<select v-model="info.current.college.id">
                <option v-for="col in colleges" :value="col.id">{{col.name}}</option>
            </select>
            </div>
            <div>
                <button @click="btnSubmitClick" type="button">添加</button>
            </div>
        </form>
    </diiv>

</div>
</body>
<script src="../../../lib/vue.global.js"></script>
<script src="../../../lib/jquery.js"></script>
<script src="../../../lib/mock.js"></script>
<script src="js/mock.js"></script>
<!--
     dom   --- data
      form --- json  object
      table--- json array
-->

<script>

    /**
     *  typescript
     * */

    const createApp = Vue.createApp;


    createApp({
        data() {
            return {

                colleges: [],
                info: { // 指向模态窗体
                    isShow: false,
                    current: {
                        courseName: '',
                        college: {
                            id: 1
                        }
                    }
                },
                list: []
            }
        }, mounted() {//挂载完成
            this.colleges = colleges.list;
            this.list = courses.list;
        }, methods: {
            btnAddClick() {
                this.info.isShow = true;
            }, btnSubmitClick() {

                const college = this.college.find((col) => {

                 return    col.id == this.info.current.college.id;
                })

                this.info.current.college = {
                    id: college.id,
                    name: college.name
                }

                this.list.unshift(this.info.current);
            }
        }
    }).mount('#app');

</script>


</html>